<template>
    <section class="section section-shaped section-lg my-0">
        <div class="shape shape-style-1 bg-gradient-default">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="container pt-lg-md">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <card type="secondary" shadow
                          header-classes="bg-white pb-5"
                          body-classes="px-lg-5 py-lg-5"
                          class="border-0">
                        <div class="row justify-content-center">
                            <div class="col-md-12">
                                <div class="row justify-content-center mb-3">
                                    <strong style="text-align:center">{{this.title}}</strong>
                                </div>
                                <div class="row justify-content-center">
                                    <div class="col-md-2 justify-content-center">
                                        <p style="text-align:center">
                                            {{this.layout}}
                                        </p>
                                    </div>
                                    <div class="col-md-1 justify-content-center"><p style="text-align:center">|</p></div>
                                    <div class="col-md-2 justify-content-center">
                                        <p style="text-align:center">
                                            {{hsize}}㎡
                                        </p>
                                    </div>
                                    <div class="col-md-1"><p style="text-align:center">|</p></div>
                                    <div class="col-md-2 justify-content-center">
                                        <p style="text-align:center">
                                            {{hfloor}}层
                                        </p>
                                    </div>
                                </div>
                                <div class="row justify-content-center">
                                    <div class="contentDiv">
                                        <p>日期：{{this.beginTime}} - {{this.endTime}}</p>
                                    </div>
                                </div>
                                <div class="row justify-content-center">
                                    <div class="contentDiv">
                                        <p>金额：{{this.rental}}</p>
                                    </div>
                                </div>
                                <div class="row justify-content-center">
                                    <div>
                                        <base-button @click="gotoPay" type="primary">点此付款</base-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br />
                        <base-alert v-if="showError" type="danger">
                            {{errorMsg}}
                        </base-alert>
                        <base-alert v-if="showSuccess" type="success">
                            付款成功!
                        </base-alert>
                    </card>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
    import {checkCookie, getOrder, getHomeInfo, userPay} from "../api";
    export default {
        data () {
            return {
                id: 0,
                title:'',
                layout:'',
                area:0,
                floor:0,
                rental:0,
                beginTime:'',
                endTime:'',
                showError: false,
                errorMsg: '',
                showSuccess: false
            }
        },
        computed:{
            hid(){
                return this.id;
            },
            hsize(){
                return this.area;
            },
            hfloor(){
                return this.floor;
            },
            rentType(){
                if (this.rentalmethod === 'shortr')
                {
                    return '短租'
                } else {
                    return '长租'
                }
            },
            hrental(){
                return this.msg.price;
            },
        },
        methods:{
            goPage(page){
                if (page === -1){
                    this.$router.go(-1);
                } else {
                    this.$router.push({name:page});
                }
            },
            message(msg){
                this.showError = true;
                this.errorMsg = msg;
            },
            gotoPay(){
                let formData = new FormData();
                formData.append('aid', this.id);
                userPay(formData).then(res=>{
                    if (res.code === "1"){
                        this.showSuccess = true;
                        setTimeout(() => {this.goPage("check-manage")}, 3000);
                    } else {
                        this.message(res.msg);
                        setTimeout(() => {this.goPage(-1)}, 3000);
                        return false;
                    }
                }).catch(err=>{
                    this.message(err);
                    setTimeout(() => {this.goPage(-1)}, 3000);
                    return false;
                })
            }
        },
        created() {
            new Promise(resolve => {
                checkCookie();
                this.id = this.$route.params.id? this.$route.params.id : 0;
                if (this.id <= 0){
                    this.message("无法获取订单，请返回订单页重新提交");
                    setTimeout(() => {this.goPage(-1)}, 3000);
                } else {
                    getOrder(this.id)
                        .then(res => {
                            if (res.code === "1"){
                                this.beginTime = res.data.beginTime.substring(0,10);
                                this.endTime = res.data.endTime.substring(0,10);
                                getHomeInfo(res.data.hid)
                                    .then(cres =>{
                                        if (cres.code === "1"){
                                            this.title = cres.data.title;
                                            this.layout = cres.data.layout;
                                            this.area = cres.data.area;
                                            this.floor = cres.data.floor;
                                            // let e = res.data.endTime.replace(/\-/g, "/");
                                            // let b = res.data.beginTime.replace(/\-/g, "/");
                                            // let etime = new Date(e);
                                            // let btime = new Date(b);
                                            // if(cres.data.rentalmethod==='shortr'){
                                            //     this.rental = Math.floor((etime.getTime()-btime.getTime())/(1000*60*60*24))*cres.data.price;
                                            // }
                                            // else {
                                            //     this.rental = Math.ceil((etime.getTime() - btime.getTime())/ (1000 * 60 * 60 * 24 * 30)) * cres.data.price;
                                            // }
                                            // var dateDiff = this.getTime(res.data.endTime) - this.getTime(res.data.beginTime);
                                            // console.log("dateDiff",dateDiff);
                                            let eTime = Date.parse(res.data.endTime);
                                            let bTime = Date.parse(res.data.beginTime);
                                            let day = parseInt((eTime-bTime)/(1000*60*60*24));
                                            if(cres.data.rentalmethod==='shortr'){
                                                this.rental = day*cres.data.price;
                                            }
                                            else {
                                                this.rental = Math.ceil(day/31) * cres.data.price;
                                            }
                                        }
                                    })
                                    .catch( error=>{
                                        this.message(error);
                                        setTimeout(() => {this.goPage(-1)}, 3000);
                                    });
                            }
                        })
                        .catch( error=>{
                            this.message(error);
                            setTimeout(() => {this.goPage(-1)}, 3000);
                        });
                    resolve();
                }
            })
        }
    }
</script>
<style>
    .contentDiv{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        margin: auto;
    }
</style>
